/* eslint-disable no-unused-expressions */
import { useBoolean } from 'ahooks';
import { Icon, Tooltip } from 'antd';
import React from 'react';
import styles from './index.less';

function IconButton({ icon, title, onClick, onMouseEnter, onMouseLeave, hoverStyle = 'normal' }) {
  const isSolidStyle = hoverStyle === 'solid';
  const [hover, { setFalse: unsetHover, setTrue: setHover }] = useBoolean(false);
  let theme = 'outlined';
  if (isSolidStyle) {
    theme = hover ? 'filled' : 'outlined';
  }

  return (
    <span
      className={isSolidStyle ? styles.icon_button_solid : styles.icon_button}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <Tooltip title={title}>
        <Icon
          onMouseEnter={setHover}
          onMouseLeave={unsetHover}
          type={icon}
          className={styles.icon}
          onClick={e => {
            e.stopPropagation();
            onClick && onClick(e);
          }}
          style={{ color: hover ? '#1890ff' : '', fontSize: 13 }}
          theme={theme}
        />
      </Tooltip>
    </span>
  );
}

export default IconButton;
